<template>
  <section>
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    <btns @exec="exec"></btns>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">列表</div>
      </div>
      <el-table :data="tableData" style="width: 100%" row-key="ifId" border lazy @selection-change="tableSelectionChange"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column type="selection" width="120"> </el-table-column>
        <el-table-column prop="wxUserId" label="名师id" width="160">
        </el-table-column>
        <el-table-column prop="nickname" label="申请人昵称"> </el-table-column>
        <el-table-column prop="level" label="学段" width="100">
        </el-table-column>
        <el-table-column prop="org" label="机构" width="150"> </el-table-column>
        <el-table-column prop="title" label="标签">
          <template slot-scope="scope">
            <el-tag type="success" v-if="tag!=''" :key="tag" v-for="tag in scope.row.title.split(',')">{{tag}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="addtime" label="申请时间"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state==2">审核中</span>
            <span v-if="scope.row.state==3">已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="reson" label="拒绝原因"> </el-table-column>
        <el-table-column prop="checktime" label="审核时间"> </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!--审核-->
    <el-dialog title="审核" :visible.sync="setFerrerDialog">
      <el-form :model="addForm" ref="addForm" :label-width="formLabelWidth">
        <el-form-item label="是否通过">
          <el-radio-group v-model="addForm.radio">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="3">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="拒绝原因" :label-width="formLabelWidth">
          <el-input v-model="addForm.reson" type="textarea" min="0" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearAdd">取 消</el-button>
        <el-button type="primary" @click="checkTeacher('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<style>
</style>
<script>
import mixins from "@/utils/mixins";
import btns from "@/components/btns.vue";
import breadcrumbs from "@/components/breadcrumbs.vue";
// import Echarts from '../charts/echarts.vue';

export default {
  mixins: [mixins],
  components: {
    btns,
    breadcrumbs,
  },
  data() {
    return {
      setFerrerDialog: false,
      addForm: { radio: 1, },
      formLabelWidth: "120px",

      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchForm: {
        date: [],
        title: "",
        endTime: "",
        beginTime: "",
        current: 1,
        size: 10,
        totalCount: "",
        keyword: "",
        orderState: "",
      },
    };
  },
  created() {
    this.orderList(this.currentPage, this.pageSize);
  },
  methods: {
    clearAdd() {
      this.setFerrerDialog = false;
      this.addForm = {};
    },
    search() {
      this.orderList(this.currentPage, this.pageSize);
    },
    orderList(cur, ss) {
      if (this.searchForm.date && this.searchForm.date.length == 2) {
        this.searchForm.beginTime = this.format(this.searchForm.date[0]);
        this.searchForm.endTime = this.format(this.searchForm.date[1]);
      }
      this.$api.teacher
        .getTeacherCheckList({
          current: cur,
          size: ss,
          beginTime: this.searchForm.beginTime,
          endTime: this.searchForm.endTime,
          keyword: this.searchForm.keyword,
        })
        .then((d) => {
          this.tableData = d.data;
          this.total = d.totalCount;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    tableSelectionChange(val) {
      this.tableSelection = val;
    },
    exec(fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]();
      } else {
        this.$message.error("方法未定义");
      }
    },
    examine() {
      if (this.tableSelection.length != 1) {
        this.$message.error("请选中一行数据");
        return;
      }
      if (this.tableSelection[0].state == 3) {
        return this.$message.error("该条数据已审核");
      }
      this.setFerrerDialog = true;
    },
    checkTeacher() {

      this.$api.teacher
        .checkTeacher({
          state: this.addForm.radio,
          reson: this.addForm.reson,
          userId: this.tableSelection[0].wxUserId,
        })
        .then((d) => {
          if (d.code == 200) {
            this.setFerrerDialog = false;
            this.orderList();
          } else {
            this.$message.error(d.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleSizeChange(v) {
      console.log(v)
      this.searchForm.size = v;
      this.orderList(this.searchForm.current, v);
    },
    handleCurrentChange(v) {
      this.searchForm.current = v;
      this.orderList(v, this.searchForm.size, v);
    },
  },
};
</script>
<style scoped>
.top-box {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.top-item {
  border: 1px rgb(189, 185, 185) solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-right: 100px;
}
.top-icon {
  width: 30%;
  height: 30%;
  margin-right: 30px;
  margin-left: 30px;
}
.fontText {
  font-size: 20px;
}

.fontTop {
  font-size: 40px;
}
.f18 {
  font-size: 25px;
  font-weight: 700;
}
.mgb-20 {
  font-size: 16px;
}
</style>
